<!-- 
    通常利用getBoundingClientRect()实时获取元素的相对位置，从而判断元素是否出现在可视区内，
    但此方法需要频繁触发 scroll 事件，很容易造成卡顿或者页面性能问题。
    所以，本案例采用IntersectionObserve(交叉观察器)。
    它可以观察我们的元素是否可见，也就是是否和可视区发生交叉。
-->
<!-- 
    IntersectionObserver构造函数接收两个参数：
        1.回调函数接收两个参数：
            1)entries是一个IntersectionObserverEntry对象数组，主要存储的是一些观察元素的信息，主要有以下7个属性：
                time：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒
                target：被观察的目标元素，是一个DOM节点对象
                rootBounds：根元素的矩形区域的信息，getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回null
                boundingClientRect：目标元素的矩形区域的信息
                isIntersecting：目标元素当前是否可见 Boolean 值 可见为 true
                intersectionRect：目标元素与视口（或根元素）的交叉区域的信息
                intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0
            2)observer：
                它返回的是被调用的 IntersectionObserve 实例，我们通常无需操作。
        2.配置对象：
            root：主要用来配置被观察元素是相对于谁可见和不可见，如果不配置，则默认的是浏览器视口。
            threshold：主要用来配置两个元素的交叉比例，它是一个数组，用于决定在什么时候触发回调函数。
            rootMargin：用来改变可视区域的范围，可以通过该参数改变可视区域大小，但是实际像素值并没有变。
    
    IntersectionObserver 实例常用的方法常主要有下面几个：
        IO.observe([element])：使用该方法后代表我们开始观察某个元素了，它接收一个元素节点作为参数，也就是被观察元素。
        IO.unobserve([element])：该方法用于停止观察某元素，同样接收一个元素节点作为参数。
        IO.disconnect()：该方法用于关闭观察器。
        IO.takeRecords()：返回所有观察目标的IntersectionObserverEntry对象数组。
-->
<!-- 
    let IO = new IntersectionObserver((entries,observer)=>{
        console.log(entries,observer)
    },{
        root:element,
        threshold:[],
        rootMargin:'100px'
    })
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            display: flex;
            justify-content: center;
            width: 100vw;
            height: 100vh;
            background-color: #202020;
        }
        li{
            width: 200px;
            height: 100px;
            margin-top: 10px;
            text-align: center;
            line-height: 100px;
            font-size: 28px;
            font-weight: bold;
            background-color: #fff;
            list-style-type: none;
        }
    </style>
</head>
<body>
    <div id="root">
        <ul ref="ul">
            <li v-for="(item,index) in number" :key="item.key">
                {{item.value}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:'#root',
            data(){
                return{
                    number:[],
                }
            },
            mounted() {
                // 创建实例
                let IO = new IntersectionObserver((entries,observe)=>{
                    //观察到后就关闭观察器
                    console.log('观察到了')
                    this.number.push({key:i,value:parseInt(Math.random()*(99-10)+11)});
                    IO.disconnect();
                },{
                    root:document.body,
                    threshold:[0],
                })
                // 先渲染8个li
                for(let i=0;i<8;i++){
                    this.number.push({key:i,value:parseInt(Math.random()*(99-10)+11)});
                }
                console.log(this.$refs.ul.children)
                //开启观察
                // IO.observe(this.$refs[`li${i}`])
            },
        })
    </script>
</body>
</html>